<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="referrer" content="no-referrer" />
  <link rel="shortcut icon" href="/static/favicon.ico">
  <title>Spider Admin</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="/static/element-ui/element-ui@2.9.1.css">
  <!-- 先引入 Vue -->
  <script src="/static/element-ui/vue@2.6.10.js"></script>
  <!-- 引入组件库 -->
  <script src="/static/element-ui/element-ui@2.9.1.js"></script>
  <script src="/static/element-ui/axios@0.18.0.min.js"></script>
  <script src="/static/js/jquery@3.4.1.min.js"></script>
  <script src="/static/js/jquery.cookie@1.4.1.min.js"></script>
  <style>
    body {
      margin: 0;
    }

    .el-header {
      background-color: #20a0ff;
      color: #fff;
      line-height: 50px;
    }

    .el-header .el-button {
      float: right;
      margin-top: 5px;
    }

    .el-aside {
      background-color: #eef1f6;
      color: #48576a;
      position: fixed;
      top: 50px;
      left: 0;
      bottom: 0;
      width: 150px;
    }

    .el-aside a {
      text-decoration: none;
      color: #333;
    }

    .el-main {
      background-color: #ffffff;
      color: #333;
      position: fixed;
      top: 50px;
      right: 0;
      bottom: 0;
      left: 152px;
      overflow: auto;
    }

    body>.el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }

    [v-cloak] {
      display: none !important;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container v-cloak>

      <el-header>
        <!-- <el-image style="width: 40px; height: 40px;" fit="fit" src="/static/favicon.jpeg"></el-image> -->
        Spider Admin <span style="font-size: 12px">{{ currentVersion }}</span>
        <span style="float:right;">

          <a href="https://github.com/mouday/SpiderAdmin" target="_blank">
            <img alt="GitHub stars" src="https://img.shields.io/github/stars/mouday/SpiderAdmin.svg?style=social">
          </a>

          <a href="https://pypi.org/project/spideradmin/" target="_blank">
            <img alt="Version" src="https://img.shields.io/pypi/v/spideradmin.svg">
          </a>
        </span>
        <!-- <el-button size="small" plain @click="refreshPage"><i class="el-icon-refresh"></i>刷新</el-button> -->
      </el-header>
      <el-container>
        <el-aside>
          <el-row class="tac">
            <el-col>

              <el-menu default-active="1" class="el-menu-vertical-demo" :default-openeds="['1', '2', '3']"
                @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>爬虫服务器</span>
                  </template>
                  <el-menu-item index="1-1" @click="openUrl('/server-vue')">服务器列表</el-menu-item>
                  <el-menu-item index="1-2" @click="openUrl('/server-status-vue')">服务器状态</el-menu-item>
                  <el-menu-item index="1-3" @click="openUrl('/item-vue')">执行结果</el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-time"></i>
                    <span>定时任务</span>
                  </template>
                  <el-menu-item index="2-1" @click="openUrl('/scheduler-vue')">定时列表</el-menu-item>
                </el-submenu>

                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-s-data"></i>
                    <span>爬虫项目</span>
                  </template>

                  <el-menu-item v-for="(item, index) in tableData" v-bind:key="index" @click="openProject(item.server_name, item.server_host)">
                      {{item.server_name}}
                  </el-menu-item>

                </el-submenu>
              </el-menu>
            </el-col>

          </el-row>
        </el-aside>
        <el-container>
          <el-main>
            <iframe id="iframe" :src="defaultUrl" frameborder="0" name="iframe-main" width="100%"
              height="100%"></iframe></el-main>
        </el-container>
      </el-container>

    </el-container>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          currentVersion: "",
          tableData: [],
          defaultUrl: "",
        }
      },

      methods: {
        // 在iframe打开url
        openUrl: function (url) {
          $.cookie("openUrl", url)
          $("#iframe").attr("src", url);
        },

        openProject: function (server_name, server_host) {
          $.cookie("server_name", server_name);
          $.cookie("server_host", server_host);
          var url = "/project-vue";
          this.openUrl(url);
        },

        handleOpen: function (key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose: function (key, keyPath) {
          console.log(key, keyPath);
        },

        getServers: function () {
          axios.get("/api/servers"
          ).then((response) => {
            this.tableData = response.data
          });
        },
        getVersion: function () {
          axios.get("/api/currentVersion"
          ).then((response) => {
            this.currentVersion = "V" + response.data.version;
          });
        }
      },
      created() {
        this.defaultUrl = $.cookie("openUrl") || "/server-vue"
        this.getServers();
        this.getVersion();
      }

    });
    window.app = app;
  </script>

</body>

</html>